<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 100px;
				height: 100px;
				background: blue;
				
			}
		</style>
	</head>
	<body>
		<button>按钮</button><br /><br />
		<div class="box"></div>
		<script src="jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//监听事件
//			$("button").on("click",btnClick)
//			function btnClick(){	
//				alert("a")
//			}
			
			//移除监听
//			$("button").off("click",btnClick)
			
			//监听一次
			$("button").one("click",btnClick)
   			 function btnClick(){
// 			 	
// 			 	//隐藏  display:none
// 			 	$(".box").hide()
// 			 	//显示 display:block
// 			 	$(".box").show()
// 			 	
// 			 	//切换  show()和 hide()
// 			 	$(".box").toggle()
// 			 }
 			  
 			  //渐变  淡入  淡出
// 			  $(".box").fadeOut();
// 			  $(".box").fadeIn();
// 			  $(".box").fadeToggle()
 			 
 			 
 			 //滑动
// 			 $(".box").slideDown(1000)
// 			 $(".box").slideUp(1000);
// 			 $(".box").toggle(1000)
 			 
// 			 $(".box").animate({
// 			 	"width":0 			 	
// 			},1000,"swing",function(){
// 			   console.log("f")
// 			 
// 			 })
 		 			 
   		  // 动画执行1s
        $('.box').animate({'width':200},1000);
        // 查看 任务队列    ["inprogress"]

        // 将前一个任务干掉
        // $('.box').queue('fx',[]);
        $('.box').queue('fx',function(){
            $('.box').css({'background':'red'});
            
            // 当前任务完成 执行下一个任务
            $('.box').dequeue();
        });
        console.log('1', $('.box').queue() );


        // 动画执行1s  width 减少 100px
        $('.box').animate({'width':'-=100'},1000);
        // ["inprogress",function]  function表示排在后面的任务
        console.log('2', $('.box').queue() );
       }
			</script>
	</body>
</html>
